<template>
  <div>
    <div>
      <h4>执行人列表</h4>
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column label="序号" type="index" width="100" align="center"></el-table-column>
        <el-table-column label="流程" prop="stepName" min-width="180" align="center"></el-table-column>
        <el-table-column label="流程说明" prop="remark" min-width="180" align="center"></el-table-column>
        <el-table-column label="执行人" prop="candidatesName" min-width="180" align="center"></el-table-column>
        <el-table-column label="操作" prop="statusDesc" min-width="180" align="center">
          <template slot-scope="scope">
            <el-button @click="setOperator(scope.row)" type="text" size="small">修改执行人</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
  import dingMixin from  '@/mixins/ding'
  import * as dd from 'dingtalk-jsapi'
  import formUtil from '@/utils/formUtil'

  export default {
    data () {
      return {
        tableData: [],
      }
    },
    mixins: [dingMixin],
    mounted(){
      this.searchStep();
    },
    methods: {
      async searchStep() {
        let modelSteps = await this.$httpN.postQ('flow/model/info', {id: 4});
        this.tableData = modelSteps.modelSteps;
        let modelSteps2 = await this.$httpN.postQ('flow/model/info', {id: 5});
        this.tableData.push(...modelSteps2.modelSteps)
      },
      setOperator(item) {
        this.complexPicker(item.candidatesLimit, []).then(async (data)=>{
          let users = data.map(item => item.emplId);
          let names = data.map(item => item.name);
          if(! await this.$httpN.postQ('flow/model/setCandidate', {modelStepId: item.id, candidateId: users.join(','), candidateName: names.join(',')})) return ;
          formUtil.submitSuccess('设置成功');
          this.searchStep();
        })
      },
    }
  }
</script>
